<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Demo</title>
<SCRIPT type=text/javascript src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></SCRIPT>
<SCRIPT type=text/javascript src="jquery.autoresize.js"></SCRIPT>
<style type="text/css">
.autotextarea{
    OVERFLOW-Y: hidden;
    WIDTH: 500px;
    DISPLAY: block;
    FONT-FAMILY: Sans-serif;
    HEIGHT: 100px;
    FONT-SIZE: 1.2em;
    OVERFLOW: hidden;
}
</style>
 
</head>
 
<body>
<textarea  id="resize" class="autotextarea"  >

</textarea>
 
 
<SCRIPT type="text/javascript">
$('textarea#resize').autoResize({
    // On resize:
    onResize : function() {
        $(this).css({opacity:0.8});
    },
    // After resize:
    animateCallback : function() {
        $(this).css({opacity:1});
    },
    // Quite slow animation:
    animateDuration : 300,
    // More extra space:
    extraSpace : 40
});
</script>
</body>
</html>